<template>
    <div class="main">
        <div ref="testHill" class="barChart"></div>
    </div>
</template>

<script>
    export default {
        name: "hill",
        mounted() {
            this.drawHill();
        },
        methods:{
            drawHill(){
                let myChart = this.$echarts.init(this.$refs.testHill);
               let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        },
                        formatter: function (params) {
                            return params[0].name + ': ' + params[0].value;
                        }
                    },
                    xAxis: {
                        data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8'],
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            color: '#ffffff'
                        }
                    },
                    yAxis: {
                        splitLine: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: { show: false }
                    },
                   grid: {
                       top: "10%",
                       right: "8%",
                       bottom: "10%",
                       left: "10%",
                   },
                    color: ['#1acacc'],
                    series: [
                        {
                            name: 'hill',
                            type: 'pictorialBar',
                            barCategoryGap: '-130%',
                            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                            itemStyle: {
                                opacity: 0.5
                            },
                            label: {
                                show: true,
                                position: "outside",
                                color: "rgb(255,255,255)",
                            },
                            emphasis: {
                                itemStyle: {
                                    opacity: 1
                                }
                            },
                            data: [123, 60, 25, 18, 12, 9, 2, 1],
                            z: 10
                        }
                    ]
                };
                option && myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style scoped>
    .main {
        width: 100%;
        height: 100%;
    }
    .barChart {
        width: 100%;
        height: calc(100% - 0.0625rem);
        box-sizing: border-box;
    }
</style>
